<template>
  <div class="dist-tabs">
    <a-tabs
      v-model="activeKey"
      hide-add
      type="editable-card"
      @edit="onEdit"
      @change="tabChange">
      <a-tab-pane
        v-for="pane in panes"
        :key="pane.key"
        :tab="pane.title"
        :closable="tabCloseable">

      </a-tab-pane>
    </a-tabs>

    <component
      class="flex-1"
      v-for="item in tabComponents1"
      :is="item.component"
      :params="pageParams"
      v-show="item.key===currentTab.key"
      :tab-params="item.tabParams"
      :key="item.id">

    </component>
  </div>
</template>

<script>
  import DistTabsPanel from './DistTabsPanel'

  export default {
    name: 'DistTabs',
    data () {
      return {
        activeKey: '',
        panes: [],
        newTabIndex: 0,
        key: Math.round(Math.random() * 1000),
        currentTab: {},
        tabComponents1: [],
        url: 'https://www.baidu.com'
      }
    },
    props: {
      pageParams: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    components: {
      DistTabsPanel
    },
    created () {
    },
    mounted () {
    },
    computed: {
      tabCloseable () {
        const closeable = this.panes.length > 1
        return closeable
      }
    },
    methods: {
      addTabs (tabs) {
        this.activeKey = tabs.key
        this.currentTab = tabs
        const currentTabs = this.panes.find(item => item.key === tabs.key)
        if (!currentTabs) {
          this.panes.push(tabs)
          const temp = {
            key: tabs.key,
            tabParams: tabs.tabParams,
            component: tabs.tabComponent,
            id: tabs.id
          }
          this.tabComponents1.push(temp)
        }
      },
      onEdit (targetKey, action) {
        this[action](targetKey)
      },
      tabChange (activeKey) {
        const currentTab = this.panes.filter(pane => pane.key === activeKey)[0]
        this.currentTab = currentTab
        this.$emit('tabClick', currentTab)
      },
      remove (targetKey) {
        let activeKey = this.activeKey
        let lastIndex
        this.panes.forEach((pane, i) => {
          if (pane.key === targetKey) {
            lastIndex = i - 1
          }
        })
        const panes = this.panes.filter(pane => pane.key !== targetKey)
        if (panes.length && activeKey === targetKey) {
          if (lastIndex >= 0) {
            activeKey = panes[lastIndex].key
          } else {
            activeKey = panes[0].key
          }
        }
        this.panes = panes
        this.activeKey = activeKey
        this.currentTab = this.panes.filter(pane => pane.key === this.activeKey)[0]
        this.tabComponents1 = this.tabComponents1.filter(item => item.key !== targetKey)
        this.$emit('tabClick', this.currentTab)
      }
    }
  }
</script>

<style  lang="less">
  .dist-tabs{
    height: 100%;
    display: flex;
    flex-direction: column;
    &-content{

    }
    /*.ant-tabs{*/
    /*  height: 100%;*/
    /*}*/
    /*.ant-tabs-content{*/
    /*  height: calc(100% - 40px);*/
    /*  .ant-tabs-tabpane{*/
    /*    height: 100%;*/
    /*  }*/
    /*}*/

  }
</style>
